<template>
	<view class="ranking-container">
		<picker mode="selector" :range="menuOptions" @change="onPickerChange">
			<view class="picker">
				<view class="picker-name">{{currentMenu}}</view>
				<u-icon :name="currentMenu =='全国排行榜' ? 'arrow-up':'arrow-down'"></u-icon>
			</view>
		</picker>

		<view v-if="currentMenu == '全国排行榜'">
			<RankingTotal :rankData="rankingStore.nationalRanking" :loading="rankingStore.loading" />
		</view>
		<view v-else-if="currentMenu == '圈友排行榜'">
			<RankingFriends :rankData="rankingStore.friendsRanking" :loading="rankingStore.loading" />
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		useRankingStore
	} from '@/stores/rankingStore'
	import RankingTotal from './components/ranking-total.vue'
	import RankingFriends from './components/ranking-friends.vue'

	const rankingStore = useRankingStore()
	const menuOptions = ref(['全国排行榜', '圈友排行榜'])
	const currentMenu = ref('全国排行榜')

	// 初始化加载数据
	onMounted(() => {
		rankingStore.fetchRankingData(1) // 默认加载全国排行榜
	})

	// 选择器改变
	const onPickerChange = (e) => {
		const index = e.detail.value
		const current = menuOptions.value[index]
		currentMenu.value = current
		rankingStore.fetchRankingData(index + 1) // 1:全国, 2:圈友
	}
</script>

<style lang="scss" scoped>
	.ranking-container {
		padding: 0 20rpx;

		.picker {
			display: flex;
			justify-content: space-around;
			width: 280rpx;
			border: 2rpx solid #BBB;
			border-radius: 12rpx;
			line-height: 56rpx;
			margin-bottom: 20rpx;
		}
	}
</style>